<template>
  <div class="todoapp">
    <!-- 头 -->
    <todo-header @add="add" :list="list" />
    <!-- 身体 -->
    <todo-main :list="newList" @del="del" />
    <!-- 底部 -->
    <todo-footer
      :list="list"
      @change="change"
      @clear="list = list.filter(v => !v.isDone)"
    />
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('todos96')) || [
        { id: 100, name: '吃饭', isDone: true },
        { id: 201, name: '睡觉', isDone: false },
        { id: 103, name: '打豆豆', isDone: true }
      ],

      status: '全部'
    }
  },
  methods: {
    del (id) {
      // 删掉一个元素相当于就是筛选出除了这个id以外的元素
      this.list = this.list.filter(v => v.id !== id)
    },
    add (task) {
      // 加到数组里
      this.list.push({
        // id要唯一，所以给时间戳
        id: Date.now(),
        // name给输入的内容
        name: task,
        // 写死false，因为新添加的内容就应该未完成
        isDone: false
      })
    },
    // 底部点击切换触发
    change (st) {
      // 把底部被点的文字存起来
      this.status = st
    }
  },

  computed: {
    newList () {
      // 根据不同的文字产生不同的数组
      if (this.status === '已完成') {
        return this.list.filter(v => v.isDone)
      } else if (this.status === '未完成') {
        // return this.list.filter(v => v.isDone == false)
        return this.list.filter(v => !v.isDone)
      } else {
        // 全部就返回list
        return this.list
      }
    }
  },

  watch: {
    list: {
      deep: true,
      handler () {
        localStorage.setItem('todos96', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style></style>
